<template>
  <!-- 登录弹窗 -->
  <div class="mask" v-if="state.loggedIn">
    <div class="login-container">
      <div class="close-btn">
        <el-icon color="#fe455d" size="25px" @click="(state.loggedIn = !state.loggedIn), clearLoginForm()">
          <CircleCloseFilled />
        </el-icon>
      </div>

      <div class="left">
        <div class="header-content">
          <div class="login-reason">登录后推荐更懂你的商品</div>
          <div class="img-container"></div>
        </div>
      </div>

      <!-- 密码登录 -->
      <div class="right animate__animated animate__flipInX" v-if="login_use_pwd">
        <div class="login-title">密码登录</div>
        <div class="input-container ">
          <el-form :model="loginForm" :rules="rules" ref="loginFormRef">
            <el-form-item prop="phone">
              <el-input v-model="loginForm.phone" @input="loginForm.phone = loginForm.phone.replace(/[^\d]/g, '')"
                maxlength="11" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="loginForm.password" :show-password="true" type="password" placeholder="请输入密码" />
            </el-form-item>
            <el-form-item>
              <div class="login-button">
                <button type="button" @click="login(loginFormRef)">登 录</button>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="footer">
          <div class="a-link">
            <span class="text-button" @click="clearLoginForm(), login_use_pwd = !login_use_pwd">验证码登录</span>
            <span class="text-button">忘记密码</span>
          </div>
        </div>
      </div>

      <!-- 验证码登录 --默认 -->
      <div class="right animate__animated animate__flipInX" v-else>
        <div class="login-title">验证码登录</div>
        <div class="input-container">
          <el-form ref="loginFormRef" :model="loginForm" :rules="rules">
            <el-form-item prop="phone">
              <el-input v-model="loginForm.phone" @input="loginForm.phone = loginForm.phone.replace(/[^\d]/g, '')"
                maxlength="11" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item prop="code">
              <el-input v-model="loginForm.code"
                @input="loginForm.code = (loginForm.code as string).replace(/[^\d]/g, '')" maxlength="6"
                placeholder="请输入验证码" />
              <el-button v-if="state.codeSent" class="checkcode" disabled text>{{ state.countdown }} 秒后再试</el-button>
              <el-button v-else class="checkcode" @click="sendCode(loginFormRef)" text>获取验证码</el-button>
            </el-form-item>

            <el-form-item>
              <div class="login-button">
                <button type="button" @click="login(loginFormRef)">登 录</button>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="footer">
          <div class="a-link">
            <span class="text-button" @click="clearLoginForm(),login_use_pwd = !login_use_pwd">密码登录</span>
            <span class="text-button">忘记密码</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CircleCloseFilled } from '@element-plus/icons-vue'
import { ref } from 'vue'
import type { FormInstance } from 'element-plus'

// 展示登陆框
const show = () => {
  state.loggedIn = true
}
const loginFormRef = ref<FormInstance>()
// 暴露给外部的方法
defineExpose({
  show,
})
// 密码登录还是验证码登录标签
const login_use_pwd = ref<boolean>(false)

// 使用验证码登录的逻辑、数据、校验逻辑 hooks
import useCodeLogin from '@/hooks/useLogin'
const { loginForm, sendCode, clearLoginForm, login, state, rules } = useCodeLogin()
</script>

<style lang="less" scoped>
// 登录弹窗部分
.mask {
  width: 100vw;
  height: 100vh;
  background-color: var(--mask-background-color);
  /* 初始背景色透明 */
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
  /* 禁用遮罩下方元素的点击事件 */
  z-index: 2;
  /* 确保遮罩在最上层 */

  .login-container {
    width: calc(var(--view-width) * 0.5);
    height: calc(var(--view-height) * 0.6);
    background-color: var(--background-color);
    position: relative;
    border-radius: 15px;
    display: flex;

    .close-btn {
      position: absolute;
      right: 20px;
      top: 20px;
      cursor: pointer;
      transition: all 0.2s;
      z-index: 3;

      &:hover {
        transform: scale(1.3);
      }
    }

    .left {
      width: 50%;
      height: 100%;
      padding-top: 10%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      flex-direction: column;
      border-right: 1px solid var(--dark-background-color);

      .header-content {
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 100%;

        .login-reason {
          height: 48px;
          padding: 0 20px;
          background: rgba(var(--theme-blue-color-rgb), 0.1);
          color: var(--theme-blue-color);
          border-radius: 30px;
          font-size: 16px;
          font-weight: 600;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .img-container {
          width: 80%;
          height: 60%;
          margin-top: 10%;
          border-radius: 16px;
          background-image: url('@/assets/img/彩玉.jpg');
          background-size: cover;
          /* 背景图片等比例缩放以覆盖整个元素 */
          background-position: center;
          /* 背景图片居中显示 */
          background-repeat: no-repeat;
          /* 背景图片不重复 */
          box-shadow: 2px 5px 10px rgba(98, 97, 97, 0.8);
        }
      }
    }

    .right {
      width: 50%;
      height: 100%;
      padding-top: 10%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      flex-direction: column;


      .login-title {
        height: 48px;
        padding: 0 20px;
        background: rgba(var(--theme-color-rgb), 0.1);
        color: var(--theme-color);
        border-radius: 30px;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .input-container {
        width: 100%;
        height: 45%;
        margin-top: 10%;
      }

      .el-input {
        width: 80%;
        margin: 0 auto;
        margin-bottom: 2%;
        --el-input-height: 40px;
        --el-input-border-radius: 20px;
      }

      :deep(.is-focus) {
        box-shadow: none;
      }

      :deep(.el-input__wrapper) {
        background-color: var(--dark-background-color);
        padding-left: 20px;
        border-radius: 20px;
        box-shadow: none;
        caret-color: var(--theme-color);
      }

      :deep(.el-form-item__error) {
        color: var(--theme-color);
        top: 95%;
        left: 15%;
      }

      .checkcode {
        position: absolute;
        top: 10%;
        right: 10%;
        color: var(--theme-color);
        transition: all 0.2s;

        &:hover {
          background-color: transparent;
        }
      }

      .login-button {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;

        button {
          width: 80%;
          height: 40px;
          background-color: var(--theme-color);
          color: #fff;
          border: none;
          font-size: 20px;
          border-radius: 20px;
          font-weight: 700;
          cursor: pointer;
          transition: all 0.3s;
        }

        button:hover {
          transform: scale(1.02);
        }
      }
    }

    .footer {
      height: 15%;
      width: 80%;

      .a-link {
        display: flex;
        justify-content: space-between;
        color: var(--dark-font-color);
        margin-top: 15%;
        font-size: 14px;

        .text-button {
          cursor: pointer;
          transition: all 0.2s;

          &:hover {
            color: var(--theme-color);
          }
        }
      }
    }
  }
}
</style>
